<!--建立考核模板首页 -->
<template>
  <div lass="app-container">
    <div v-if="!comOnViewProgressd1">
      <div style="height: 700px; margin: 25px" v-if="!comOnViewProgressd">
        <span style="display:flex; justify-content:space-between;width:100%;align-items:center">
          <!-- 考核模板 -->
          <el-row class="createMUban">
            <h3>考核填报</h3>
          </el-row>
          <!-- 查询搜索 -->

          <span>
            <el-form style="display:flex;" :model="ruleForm1" ref="ruleForm1">
              <el-form-item label="类型">
                <el-select
                  clearable
                  placeholder="请选择"
                  style="width:50%;"
                  v-model="ruleForm1.years"
                  @change="changeOne"
                >
                  <el-option label="年度" value="3"></el-option>
                  <el-option label="季度" value="2"></el-option>
                  <el-option label="月度" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="年份" style="margin-left:-40px" v-if="nians">
                <el-date-picker
                  style="width:51%;"
                  v-model="ruleForm1.quarter"
                  type="year"
                  value-format="yyyy年"
                  format="yyyy年"
                  placeholder="年份"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="季度" style="margin-left:-40px" v-if="jidus">
                <el-select placeholder="请选择" style="width:51%;" v-model="ruleForm1.quarter">
                  <el-option label="第一季度" value="第一季度"></el-option>
                  <el-option label="第二季度" value="第二季度"></el-option>
                  <el-option label="第三季度" value="第三季度"></el-option>
                  <el-option label="第四季度" value="第四季度"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="月份" style="margin-left:-40px" v-if="yues">
                <el-date-picker
                  style="width:64%;"
                  v-model="ruleForm1.quarter"
                  type="month"
                  format="yyyy年MM月"
                  value-format="yyyy-MM"
                  placeholder="月份"
                ></el-date-picker>
              </el-form-item>
              <el-button @click="sousuo" type="primary" style="height:40px;">搜索</el-button>
            </el-form>
          </span>
        </span>
        <!-- 表格信息 -->
        <el-row>
          <el-table
            :data="tableData"
            style="width: 100%; color: #333333; font-size: 14px"
            height="700"
            align="center"
            :header-cell-style="{ background: '#ECF1F9' }"
          >
            <el-table-column fixed type="index" align="center" label="编号"></el-table-column>
            <el-table-column prop="name" align="center" label="考核名称"></el-table-column>
            <el-table-column prop="assessTemplatePeriod" align="center" label="考核周期" width="120">
              <template v-slot="scope">
                <!-- {{ scope.row.status === 1 ? "是" : "否" }} -->
                <span v-if="scope.row.assessTemplatePeriod == 1">月度</span>
                <span v-else-if="scope.row.assessTemplatePeriod === 2">季度</span>
                <span v-else>年度</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="period" align="center" label="考核年份" width="120"></el-table-column> -->
            <el-table-column prop="period" align="center" label="考核阶段" width="120"></el-table-column>
            <el-table-column prop="beginTime" align="center" label="考核开始时间" width="200"></el-table-column>
            <el-table-column prop="endTime" align="center" label="考核截止时间" width="200"></el-table-column>
            <el-table-column prop="assessState" align="center" label="考核状态" width="120">
              <template v-slot="scope">
                <!-- {{ scope.row.status === 1 ? "是" : "否" }} -->
                <span v-if="scope.row.assessState === 0" style="color:red">未开始</span>
                <span v-else-if="scope.row.assessState === 1" style="color:#35A06D">进行中</span>
                <span v-else style="color:#333333">已结束</span>
              </template>
            </el-table-column>

            <el-table-column prop="fillingStatus" align="center" label="填报状态" width="120">
              <template v-slot="scope">
                <span v-if="scope.row.fillingStatus==2" style="color:#333333">已填报</span>
                <span v-if="scope.row.fillingStatus==1" style="color:#EF7045">未填报</span>
                <!-- {{ scope.row.status === 1 ? "是" : "否" }} -->
                <!-- <span style="color:red" v-for="item in scope.row.contentDto.normDtoList">
                </span>-->
              </template>
              <!-- <span v-for=" item in scope.row.contentDto.normDtoList">
                  <span v-for="items in item.latitudeBeans">{{ items.state }}</span>
              </span>-->
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="120">
              <template slot-scope="scope">
                <!--  v-if="ruleForm.states!==1 && ruleForm.states!==2? true:false" -->
                <el-button
                  type="text"
                  size="small"
                  style="rgba(124, 145, 255,1);font-weight:800"
                  v-if="scope.row.fillingStatus!==1 && scope.row.fillingStatus!==2? true:false"
                ></el-button>
                <el-button
                  v-if="scope.row.fillingStatus==1? true:false"
                  @click.native.prevent="comOnRow(scope.row)"
                  type="text"
                  size="small"
                  style="color:#3B95FF"
                >进入填报</el-button>
                <el-button
                  v-if="scope.row.fillingStatus==2? true:false "
                  @click.native.prevent="editRow(scope.row)"
                  type="text"
                  size="small"
                  style="color: #35A06D"
                >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row>
            <el-pagination
              style="text-align: right;margin-top:16px"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[5, 10]"
              :page-size="pageSize"
              layout="sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </el-row>
        </el-row>
      </div>
    </div>

    <!-- :dataTypes="dataTypes" @giveFather="updateTitle" -->
    <comOnViewProgress v-if="comOnViewProgressd" :dataTypes="dataTypes" @giveFather="getSon"></comOnViewProgress>
    <lookViewProgress v-if="comOnViewProgressd1" :dataTypes1="dataTypes1" @giveFather1="getSon1"></lookViewProgress>
  </div>
</template>
  
  <script>
import {
  getJilugList,
  getJILUdata,
  getMubanList,
  getUserId
} from "@/api2/kaohe"; //
import comOnViewProgress from "./components/comOnViewProgress.vue";
import lookViewProgress from "./components/lookViewProgress.vue";
export default {
  components: {
    comOnViewProgress: comOnViewProgress,
    lookViewProgress: lookViewProgress
  },
  data: () => {
    return {
      dataTypes: {},
      comOnViewProgressd: false,
      comOnViewProgressd1: false,
      disabled: true,
      nian: false,
      jidu: false,
      yue: false,
      nians: false,
      jidus: false,
      yues: false,
      formLabelWidth: "130px", //label-width
      tableData: [],
      muBan: [],
      userList: null,
      userIds: "",
      pageNum: 1, //当前页
      total: 0, //总条数updateTitle
      // tableData: [], //当前页码的表格数据
      pageSize: 10, //当前页容量
      ruleForm: {
        states: "",
        assessTemplateName: "",
        assessTemplateId: "",
        assessTemplatePeriod: "",
        assessorUserId: "",
        beginTime: "",
        createBy: "",
        createTime: "",
        deFlag: 0,
        endTime: "",
        id: "",
        name: "",
        number: 0,
        params: {},
        period: "",
        scoreType: 0,
        updateBy: "",
        updateTime: ""
      },
      ruleForm1: {
        years: "",
        quarter: ""
      },
      tianbaoData: {
        name: ""
      },
      //规则校验
      rules: {
        //指标名称校验
        assessTemplateId: [
          { required: true, message: "考核模板必选", trigger: "change" }
        ],
        name: [
          { required: true, message: "请输入考核表名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30个字符", trigger: "blur" }
        ],
        period: [{ required: true, message: "周期必选", trigger: "change" }],
        beginTime: [
          { required: true, message: "考核开始时间必选", trigger: "change" }
        ],
        endTime: [
          { required: true, message: "考核截止时间必选", trigger: "change" }
        ],
        assessorUserId: [
          {
            required: true,
            message: "被考核人员不能少于一个",
            trigger: "blur"
          }
        ]
      }
    };
  },

  created() {
    this.getUserIds();
    //获取用户基本信息
    this.getMubanLists(); //获取所有考核模板
  },
  mounted() {},
  methods: {
    //获取用户基本信息
    getUserIds() {
      setTimeout(() => {
        getUserId()
          .then(res => {
            console.log(res);
            if (res.code == 0) {
              console.log(res);
              this.userIds = res.data.id;
              this.getJilugLists(res.data.id, res.data); //获取表格数据
            } else {
              console.log(error);
            }
          })
          .catch(e => {
            console.log(e);
          });
      }, 500);
    },
    //comOnRow
    comOnRow(val) {
      console.log(val);
      if (val.assessState == 2) {
        this.$message({
          message: "该考核已结束，无法填报",
          type: "error"
        });
        return;
      } else {
        this.$confirm(
          "确定进入" + "《" + val.name + "》" + "进行填报吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            this.$message({
              type: "success",
              message: "进入成功!"
            });
            let arr = this.userList;
            console.log(arr);
            this.dataTypes = { val };
            this.comOnViewProgressd = true;
            console.log(val);
            // this.dataTypes = { val, index };
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      }
    },
    getSon(temp) {
      this.comOnViewProgressd = false;
      this.getJilugLists();
    },
    getSon1(temp) {
      this.comOnViewProgressd1 = false;
      this.getJilugLists();
    },
    updateTitle(e) {
      //声明这个函数
      this.viewProgress = e;
    },
    //查看进展
    editRow(val) {
      console.log(val);
      this.$confirm(
        "确定查看" + "《" + val.name + "》" + "的填报吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.$message({
            type: "success",
            message: "进入成功!"
          });
          let arr = this.userList;
          this.dataTypes1 = { val };
          this.comOnViewProgressd1 = true;
          console.log(val);
          // this.dataTypes = { val, index };
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
      // this.viewProgress = true;
      // this.dataTypes = rows;
    },

    async changeOne(e) {
      console.log(e);
      if (e == 1) {
        this.yues = true;
        this.nians = false;
        this.jidus = false;
        this.ruleForm1.quarter = "";
      } else if (e == 2) {
        this.yues = false;
        this.nians = false;
        this.jidus = true;
        this.ruleForm1.quarter = "";
      } else {
        this.yues = false;
        this.nians = true;
        this.jidus = false;
        this.ruleForm1.quarter = "";
      }
    },
    //查询接口
    sousuo() {
      if (this.ruleForm1.years == "" && this.ruleForm1.quarter == "") {
        const params1 = this.userIds;
        this.getJilugLists(params1); //获取表格数据
      } else {
        const params = {
          type: this.ruleForm1.years,
          period: this.ruleForm1.quarter,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          queryType: "2",
          userId: this.userIds
        };
        console.log(params);
        getJILUdata(params)
          .then(res => {
            if (res.code == 0) {
              res.data.sort(
                (a, b) =>
                  new Date(b.createTime).getTime() -
                  new Date(a.createTime).getTime()
              ); //这是升序，倒序的话翻过来
              this.tableData = res.data;
              this.total = res.total; //总条数
            }
          })
          .catch(e => {
            console.log(e);
          });
      }
    },
    //获取所有考核模板
    async getMubanLists() {
      const res = await getMubanList();
      this.muBan = res.data;
    },
    //切换每页条数容量
    handleSizeChange(val) {
      this.pageSize = val;
      this.getJilugLists(this.pageNum, this.pageSize);
    },
    //切换当前页
    handleCurrentChange(val) {
      this.pageNum = val;
      const params = JSON.parse(sessionStorage.getItem("loginUserinfo")).uid;
      this.getJilugLists(params);
    },
    //获取表格数据
    getJilugLists(ids, list) {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        queryType: "2",
        userId: this.userIds
      };
      getJILUdata(params)
        .then(res => {
          // let arrs = [];
          // res.data.forEach(item => {
          //   console.log(item.contentDto.normDtoList);
          //   item.contentDto.normDtoList.forEach(items => {
          //     console.log(items);
          //     items.latitudeBeans.forEach(itemsd => {
          //       arrs.push(itemsd.state);
          //     });
          //   });
          // });
          // console.log(arrs);
          // let max = Math.max.apply(null, arrs);
          // console.log(max);
          // this.ruleForm.states = max;
          if (res.code == 0) {
            res.data.sort(
              (a, b) =>
                new Date(b.createTime).getTime() -
                new Date(a.createTime).getTime()
            ); //这是升序，倒序的话翻过来
            this.userList = list;
            this.tableData = res.data;
            this.total = res.total; //总条数
          }
        })
        .catch(e => {
          console.log(e);
        });
    }
  }
};
</script>
  
  <style lang="scss" scoped>
.createMUban {
  display: inline-flex;
  align-items: center;
}
/* 共同样式 */
.add_dimension {
  color: blue;
}
.delete_dimension {
  color: red;
}
.add_dimension:hover {
  color: rgb(72, 72, 234);
}
.delete_dimension:hover {
  color: rgb(245, 71, 71);
}
.nextOne {
  margin-top: 25px;
  margin-left: 45%;
  background-color: #0096fe;
}
::v-deep .el-dialog__footer {
  /*width: 0;宽度为0隐藏*/
  text-align: center;
}
// 滚动条样式
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213, 215, 220, 0.3);
    border: none;
  }
  &::-webkit-scrollbar-track {
    // 滚动条轨道
    border: none;
  }
}

::v-deep .el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: auto;
}

::v-deep .el-table th.gutter {
  display: none;
  width: 0;
}
::v-deep .el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}

::v-deep .el-table__body {
  width: 100% !important;
}
// ::v-deep .el-input--suffix .el-input__inner {
//   height: 25px;
//   border-radius: 0%;
// }
// ::v-deep .el-input__inner {
//   height: 25px;
//   border-radius: 0%;
// }
</style>
  